<template>
  <div id="cinema-detail">
    <div class="top">
      <span class="icon-back" @click="$router.go(-1)"></span>
      <span class="name ellipsis">{{ currentCinemaInfo.cinema_name }}</span>
    </div>
    <div class="cinema-info">
      <span class="name">{{ currentCinemaInfo.cinema_name }}</span>
      <span class="address">
        <span class="icon icon-address"></span>
        {{ currentCinemaInfo.specified_address }}
      </span>
      <span class="tel">
        <span class="icon icon-tel"></span>
        {{ currentCinemaInfo.cinema_phone }}
      </span>
    </div>
    <!-- 走马灯 -->
    <el-carousel
      :autoplay="false"
      type="card"
      height="5rem"
      arrow="never"
      :loop="false"
      :initial-index="initMovieId"
      indicator-position="none"
      @change="changeCarousel"
      v-if="carouselReset"
    >
      <el-carousel-item v-for="(item, index) in hasMovieInfo" :key="index">
        <a
          href="#"
          @click.prevent="
            $router.push({
              path: '/movie_detail',
              query: { movie_id: item.movie_id },
            })
          "
        >
          <img :src="$server + item.poster" alt />
        </a>
      </el-carousel-item>
    </el-carousel>
    <div
      class="movie-info"
      v-for="(item, index) in hasMovieInfo"
      :key="index"
      v-show="movieIndex === Number(index)"
    >
      <span class="arrow"></span>
      <span class="main">
        <span class="name">{{ item.name }}</span>
        <span class="score">
          <span class="num" v-if="item.score">{{ item.score.toFixed(1) }}分</span>
          <span v-else style="font-size: 0.28rem">暂无评分</span>
        </span>
      </span>
      <span class="intro">
        <span class="time">{{ item.movie_long }}</span>
        <span class="split">|</span>
        <span class="type">{{ item.type }}</span>
        <span class="split">|</span>
        <span class="actors">{{ item.actor }}</span>
      </span>
    </div>
    <ly-tab
      v-model="selectedId"
      :items="items"
      :options="options"
      class="ly-tab"
      v-if="hackReset"
      @change="changeLyTabItem"
    />
    <div class="ticket-container">
      <div class="item" v-for="(item, index) in movieDaySchedule" :key="index">
        <div class="left">
          <span class="start-date">{{ item.show_time }}</span>
          <span class="end-date">{{ endDate(item) }}散场</span>
        </div>
        <div class="center">
          <div class="info">
            <span class="language">{{ item.language }}3D</span>
            <span class="hall">{{ item.hall_name }}</span>
          </div>
          <div class="price">{{ item.price.toFixed(2) }}元</div>
        </div>
        <div class="right">
          <span
            class="buy-btn"
            @click="
              $router.push({
                path: '/select_seat',
                query: {
                  cinema_id: item.cinema_id,
                  movie_id: item.movie_id,
                  schedule_id: item.schedule_id,
                },
              })
            "
          >购票</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getCurrentCinemaDetail,
  getCurrentCinemaMovieSchedule,
} from '../../api/index'
import Vue from 'vue'
import { Indicator } from 'mint-ui'
import { Carousel, CarouselItem } from 'element-ui'
import LyTab from 'ly-tab'
import { formatDate } from '../../common/util/util'
Vue.use(Carousel)
Vue.use(CarouselItem)
Vue.use(LyTab)
export default {
  name: 'CinemaDetail',
  data() {
    return {
      initMovieId: 0,
      //当前影院信息
      currentCinemaInfo: {},
      //影院的电影信息
      hasMovieInfo: [],
      //下面所有的电影时间安排
      allMovieSchedule: [],
      //下面电影某一天的时间安排
      movieDaySchedule: [],
      hackReset: false,
      carouselReset: true,
      movieIndex: 0,

      selectedId: 0,
      items: [],
      options: {
        activeColor: '#1e88e5',
      },
    }
  },
  created() {
    Indicator.open('Loading...')
    this.loadCinemaDetail()
  },
  methods: {
    async loadCinemaDetail() {
      if (this.$route.query.cinema_id) {
        // 请求电影详细信息
        let json = await getCurrentCinemaDetail(this.$route.query.cinema_id)
        if (json.success_code === 200) {
          this.currentCinemaInfo = json.data
        }
        // 请求当前电影院安排信息
        json = await getCurrentCinemaMovieSchedule(this.$route.query.cinema_id)
        if (json.success_code === 200) {
          this.hasMovieInfo = json.data.hasMovieInfo
          if (this.$route.query.movie_id) {
            this.hasMovieInfo.forEach((val, index) => {
              if (this.$route.query.movie_id == val.movie_id) {
                // 进来页面显示哪个电影
                this.initMovieId = index
                this.movieIndex = index
                this.$nextTick(() => {
                  this.carouselReset = true
                })
              }
            })
          }
          // 电影安排
          let movieScheduleInfo = json.data.movieScheduleInfo
          movieScheduleInfo.forEach((value, index) => {
            let movieDate = []
            let movieInfo = []
            value.forEach((val) => {
              let flag = true
              movieDate.forEach((value) => {
                if (value.label === val.show_date) {
                  flag = false
                }
              })
              if (flag) {
                movieDate.push({
                  label: formatDate(new Date(val.show_date), true),
                  date: val.show_date,
                })
                movieInfo.push({
                  cinema_id: val.cinema_id,
                  movie_id: val.movie_id,
                  schedule_id: val.schedule_id,
                  show_date: val.show_date,
                  show_time: val.show_time,
                  language: val.language,
                  movie_long: val.movie_long,
                  hall_name: val.hall_name,
                  price: val.price,
                })
              }
            })
            //  利用对象访问属性的方法，判断对象中是否存在date 对象去重
            let newArr = []
            let obj = {}
            for (var i = 0; i < movieDate.length; i++) {
              if (!obj[movieDate[i].date]) {
                newArr.push(movieDate[i])
                obj[movieDate[i].date] = true
              }
            }
            movieDate = newArr
            this.allMovieSchedule[index] = { movieDate, movieInfo }
          })

          //tab 电影排片显示的时间
          this.items = this.allMovieSchedule[this.movieIndex].movieDate
          this.items.sort((a, b) => {
            return Date.parse(a.date) - Date.parse(b.date)
          })
          this.$nextTick(() => {
            this.hackReset = true
          })
          this.allMovieSchedule[this.movieIndex].movieInfo.forEach(
            (value, index) => {
              if (value.show_date === this.items[0].date) {
                this.movieDaySchedule.push(value)
              }
            }
          )
          this.movieDaySchedule.sort((a, b) => {
            return (
              new Date(a.show_date + ',' + a.show_time) -
              new Date(b.show_date + ',' + b.show_time)
            )
          })
          //取出电影排片中重复的数组
          for (let i = 0; i < this.items.length; i++) {
            if (i < this.items.length - 1) {
              if (this.items[i].date === this.items[i + 1].date) {
                this.items.splice(i, 1)
              }
            }
          }
        }
      }
      this.changeLyTabItem({ date: this.$route.query.time })
      Indicator.close()
    },
    //切换轮播图
    changeCarousel(index) {
      this.movieIndex = index
      this.items = this.allMovieSchedule[index].movieDate
      this.hackReset = false
      this.$nextTick(() => {
        this.hackReset = true
      })
      this.selectedId = 0
      this.movieDaySchedule = []
      this.allMovieSchedule[index].movieInfo.forEach((value, index2) => {
        if (
          value.show_date === this.allMovieSchedule[index].movieDate[0].date
        ) {
          this.movieDaySchedule.push(value)
        }
      })
      this.movieDaySchedule.sort((a, b) => {
        return (
          new Date(a.show_date + ',' + a.show_time) -
          new Date(b.show_date + ',' + b.show_time)
        )
      })
    },
    //切换日期
    changeLyTabItem(item) {
      this.movieDaySchedule = []
      this.allMovieSchedule[this.movieIndex].movieInfo.forEach((value) => {
        if (item.date) {
          if (value.show_date === item.date) {
            this.movieDaySchedule.push(value)
          }
        } else {
          this.movieDaySchedule.push(this.allMovieSchedule[0].movieInfo[0])
        }
      })
      this.movieDaySchedule.sort((a, b) => {
        return (
          new Date(a.show_date + ',' + a.show_time) -
          new Date(b.show_date + ',' + b.show_time)
        )
      })
      this.items.forEach((el, index) => {
        if (item.date) {
          if (el.date === item.date) {
            this.selectedId = index
          }
        } else {
          this.selectedId = 0
        }
      })
    },
    //影片结束时间
    endDate(item) {
      let h = parseInt(
        Number(item.show_time.split(':')[0]) + parseInt(item.movie_long) / 60
      )
      let m =
        Number(item.show_time.split(':')[1]) + (parseInt(item.movie_long) % 60)
      if (m > 59) {
        return (
          (h + parseInt(m / 60) < 10
            ? '0' + (h + parseInt(m / 60))
            : h + parseInt(m / 60)) +
          ':' +
          (m % 60 < 10 ? '0' + (m % 60) : m % 60)
        )
      } else {
        return (h < 10 ? '0' + h : h) + ':' + (m < 10 ? '0' + m : m)
      }
    },
  },
}
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
#cinema-detail {
  width: 100%;
  height: 100%;
  color: #000;
  font-size: 0.3125rem;

  .top {
    width: 100%;
    height: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #1e88e5;
    color: #fff;
    z-index: 999;

    .icon-back {
      font-size: 0.4rem;
      position: absolute;
      left: 0.3rem;
    }

    .name {
      width: 60%;
      font-size: 0.375rem;
      text-align: center;
      line-height: 0.375rem;
    }
  }

  .cinema-info {
    margin-top: 1rem;
    color: #888;
    display: flex;
    flex-flow: column;
    padding: 0.25rem;

    .name {
      color: #000;
      font-size: 0.345rem;
      font-weight: 700;
      margin-bottom: 0.25rem;
    }

    .address, .tel {
      margin-bottom: 0.12rem;
      font-size: 0.28rem;
      line-height: 0.375rem;
      display: flex;
      letter-spacing: 0.02rem;
      align-items: flex-start;

      .icon {
        font-size: 0.375rem;
        margin-right: 0.08rem;
      }
    }
  }

  .movie-info {
    height: 1.4rem;
    display: flex;
    flex-flow: column;
    align-items: center;

    .arrow {
      border: 0.2rem solid transparent;
      border-bottom: 0.2rem solid #fff;
      margin-top: -0.38rem;
      z-index: 999;
    }

    .main {
      font-size: 0.345rem;

      .name {
        line-height: 0.8rem;
        font-weight: 700;
      }

      .score {
        color: #ffb400;
        margin-left: 0.25rem;
        font-size: 0.1rem;

        .num {
          font-size: 0.3125rem;
          font-weight: 700;
          font-family: PingFangSC-Regular, Hiragino Sans GB, sans-serif;
        }
      }
    }

    .intro {
      font-size: 0.25rem;
      color: #888;

      .split {
        margin: 0 0.08rem;
      }
    }
  }

  .el-carousel {
    background: linear-gradient(to bottom, #242342 0%, #11182B 100%);

    .el-carousel__item {
      margin-top: 0.25rem;
      height: 90%;

      a {
        font-size: 0.3125rem;
        padding-top: 0.04rem;

        img {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border: 0.06rem solid #fff;
        }
      }
    }
  }

  .ly-tab {
    color: #000;
    border: none;
  }

  .ticket-container {
    padding: 0.25rem;

    .item {
      display: flex;
      justify-content: space-around;
      align-items: center;
      border-bottom: 0.02rem solid #f1f1f1;
      padding: 0.25rem 0;

      .left {
        flex: 1;
        display: flex;
        flex-flow: column;
        justify-content: center;

        .start-date {
          font-weight: bolder;
          font-size: 0.375rem;
          margin-bottom: 0.12rem;
        }

        .end-date {
          color: #888;
          font-size: 0.25rem;
        }
      }

      .center {
        flex: 3;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 0.25rem;

        .info {
          display: flex;
          flex-flow: column;
          justify-content: center;
          align-items: center;
          margin-left: 0.25rem;

          .language {
            font-size: 0.28rem;
            margin-bottom: 0.12rem;
          }

          .hall {
            color: #888;
            font-size: 0.25rem;
          }
        }

        .price {
          color: #1e88e5;
          margin-right: 0.25rem;
        }
      }

      .right {
        flex: 1;
        text-align: center;
        border: 0.0125rem solid #1e88e5;
        padding: 0.12rem 0;
        border-radius: 0.25rem;
        color: #1e88e5;
        font-size: 0.25rem;
      }
    }
  }
}
</style>
